﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="util" uri="functions"%>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 下拉框 -->
<link rel="stylesheet" href="/static/ace/css/chosen.css" />
<!-- jsp文件头和头部 -->
<%@ include file="../../system/index/top.jsp"%>
<!-- 日期框 -->
<link rel="stylesheet" href="/static/ace/css/datepicker.css" />
<!-- 分页控件 -->
<script type="text/javascript" src="/static/ace/js/jquery.js"></script>
<link type="text/css" href="/static/css/page/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="/static/css/page/bootstrap-pagination.min.css" rel="stylesheet" />
</head>
<body class="no-skin">

	<!-- /section:basics/navbar.layout -->
	<div class="main-container" id="main-container">
		<!-- /section:basics/sidebar -->
		<div class="main-content">
			<div class="main-content-inner">
				<div class="page-content">
					<div class="row">
						<div class="col-xs-12">
						<div v-cloak id="div_all_data" >
						<!-- 检索  -->
						<form  method="post" name="Form" id="Form">
						<table style="margin-top:5px;">
							<tr>
								<td>
									<div class="nav-search">
										<span class="input-icon">
											<input type="text" placeholder="这里输入关键词" class="nav-search-input" id="nav-search-input" autocomplete="off" name="keywords" value="${queryParam.keywords }" />
											<i class="ace-icon fa fa-search nav-search-icon"></i>
										</span>
									</div>
								</td>
								<td style="padding-left:2px;"><input class="span10 date-picker" name="lastStart" id="lastStart"  value="${util:getDateTime(queryParam.lastStart)}" type="text" data-date-format="yyyy-mm-dd" readonly="readonly" style="width:88px;" placeholder="开始日期" title="开始日期"/></td>
								<td style="padding-left:2px;"><input class="span10 date-picker" name="lastEnd" id="lastEnd"  value="${util:getDateTime(queryParam.lastEnd)}" type="text" data-date-format="yyyy-mm-dd" readonly="readonly" style="width:88px;" placeholder="结束日期" title="结束日期"/></td>
								<td style="vertical-align:top;padding-left:2px;">
								 	<select class="chosen-select form-control" name="name"  data-placeholder="请选择" style="vertical-align:top;width: 120px;">
									<option value=""></option>
									<option value="">全部</option>
									<option value="">1</option>
									<option value="">2</option>
								  	</select>
								</td>
								<c:if test="${util:listAble() }">
								<td style="vertical-align:top;padding-left:2px"><a class="btn btn-light btn-xs" onclick="tosearch();"  title="检索"><i id="nav-search-icon" class="ace-icon fa fa-search bigger-110 nav-search-icon blue"></i></a></td>
								</c:if>
								<c:if test="${buttonRights.toExcel == 1 }"><td style="vertical-align:top;padding-left:2px;"><a class="btn btn-light btn-xs" onclick="toExcel();" title="导出到EXCEL"><i id="nav-search-icon" class="ace-icon fa fa-download bigger-110 nav-search-icon blue"></i></a></td></c:if>
							</tr>
						</table>
						<!-- 检索  -->
					
						<table id="simple-table" class="table table-striped table-bordered table-hover" style="margin-top:5px;">	
							<thead>
								<tr>
									<th class="center" style="width:35px;">
									<label class="pos-rel"><input type="checkbox" class="ace" id="zcheckbox" /><span class="lbl"></span></label>
									</th>
									<th class="center" style="width:50px;">序号</th>
									<th class="center">文章id</th>
									<th class="center">内容</th>
									<th class="center">添加时间</th>
									<th class="center">操作</th>
								</tr>
							</thead>
													
							<tbody>
							<!-- 开始循环 -->	
									<c:if test="${util:listAble() }">
										<tr v-for="(item,index) in data">
											<td class='center'>
												<label class="pos-rel"><input type='checkbox' name='ids' :value="item.id" class="ace" /><span class="lbl"></span></label>
											</td>
											<td class='center' style="width: 30px;">{{index + 1}}</td>
											<td class='center'>{{item.articleId}}</td>
											
											<td class='center'>{{item.content}}</td>
											
											<td class='center'>{{item.addDate | datetime}}</td>
											<td class="center">
												<c:if test="${!util:editAble() && !util:deleteAble() }">
												<span class="label label-large label-grey arrowed-in-right arrowed-in"><i class="ace-icon fa fa-lock" title="无权限"></i></span>
												</c:if>
												<div class="hidden-sm hidden-xs btn-group">
													<c:if test="${util:editAble() }">
													<a class="btn btn-xs btn-success" title="编辑" @click="edit(item.id);">
														<i class="ace-icon fa fa-pencil-square-o bigger-120" title="编辑"></i>
													</a>
													</c:if>
													<c:if test="${util:deleteAble() }">
													<a class="btn btn-xs btn-danger" @click="del(item.id);">
														<i class="ace-icon fa fa-trash-o bigger-120" title="删除"></i>
													</a>
													</c:if>
												</div>
											</td>
										</tr>
									
									</c:if>
									<c:if test="${!util:listAble() }">
										<tr>
											<td colspan="100" class="center">您无权查看</td>
										</tr>
									</c:if>
							
							</tbody>
						</table>
						<div class="page-header position-relative">
						<table style="width:100%;">
							<tr>
								<td style="vertical-align:top;">
									<c:if test="${util:addAble() }">
									<a class="btn btn-sm btn-success" @click="add();">新增</a>
									</c:if>
									<c:if test="${util:deleteAble() }">
									<a class="btn btn-sm btn-danger" @click="deleteAll" title="批量删除" ><i class='ace-icon fa fa-trash-o bigger-120'></i></a>
									</c:if>
								</td>
								<!-- 分页的底部 -->
                                <td style="vertical-align:top;">
                                    <nav style="float:right">
                                        <ul id="ul_page" class="pagination">
                                        </ul>
                                    </nav>
                                 </td>
							</tr>
						</table>
						</div>
						</form>
					    </div>
						</div>
						<!-- /.col -->
					</div>
					<!-- /.row -->
				</div>
				<!-- /.page-content -->
			</div>
		</div>
		<!-- /.main-content -->

		<!-- 返回顶部 -->
		<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
			<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
		</a>

	</div>
	<!-- /.main-container -->

	<!-- basic scripts -->
	<!-- 页面底部js¨ -->
	<%@ include file="../../system/index/foot.jsp"%>
	<script type="text/javascript" src="/static/js/jquery-form.js"></script>
    <script type="text/javascript" charset="utf-8" src="/static/js/page/bootstrap-pagination.min.js"></script>
	<!-- 删除时确认窗口 -->
	<script src="/static/ace/js/bootbox.js"></script>
	<!-- ace scripts -->
	<script src="/static/ace/js/ace/ace.js"></script>
	<!-- 下拉框 -->
	<script src="/static/ace/js/chosen.jquery.js"></script>
	<!-- 日期框 -->
	<script src="/static/ace/js/date-time/bootstrap-datepicker.js"></script>
	<!--提示框-->
	<script type="text/javascript" src="/static/js/jquery.tips.js"></script>
	<!--vue-->
	<script type="text/javascript" src="/static/js/myjs/list-common.js"></script>
	<script type="text/javascript" src="/static/js/vue/vue.min.js"></script>
	<script type="text/javascript" src="/static/js/vue/vue-common-filter.js"></script>
	<script type="text/javascript">
		$(function() {
			//关闭加载状态
			top.hangge();
		   
			//日期框
			$('.date-picker').datepicker({
				autoclose: true,
				todayHighlight: true,
				clearBtn: true
			});
			tosearch();
		});
		//检索
		function tosearch(){
			top.jzts();
			pageData.pageInfo = $('#Form').parseForm();
            pageList(0, pageData.pageInfo.size, 1);
		}
		//分页数据
        var pageData = {};
        pageData.total = "0";
        pageData.pageInfo = {};
        pageData.pageInfo.size =10;
        pageData.pageInfo.current = 0;
        pageData.data = [];
        
        var pageVm = new Vue({
            el: '#div_all_data',
            data: pageData,
            methods: {
                edit: function (id) {
                	 //修改
                     top.jzts();
                     var diag = new top.Dialog();
                     diag.Drag=true;
                     diag.Title ="编辑";
                     diag.URL = '/admin/articleleftmessage/edit?id='+id;
                     diag.Width = 1000;
                     diag.Height = 750;
                     diag.CancelEvent = function(){ //关闭事件
                        pageList(0, pageData.pageInfo.size, 1);
                        diag.close();
                     };
                     diag.show();
                },
                del: function (id) {
                	//删除
                    bootbox.confirm("确定要删除吗?", function(result) {
                        if(result) {
                            top.jzts();
                            var postData = {};
                        	postData.id = id;
                        	 $.post("/admin/articleleftmessage/delete",postData, function(result){
                        	 	top.hangge();
                            	if(result.code == 200){
                            		bootbox.alert("成功", function(){
                            			 pageList(0, pageData.pageInfo.size, 1);
                            		})
                            	}
                            });
                           
                        }
                    });
                },
                add: function () {
                   	 //添加
                     top.jzts();
                     var diag = new top.Dialog();
                     diag.Drag=true;
                     diag.Title ="新增";
                     diag.URL = '/admin/articleleftmessage/add';
                     diag.Width = 1000;
                     diag.Height = 750;
                     diag.CancelEvent = function(){ //关闭事件
                        pageList(0, pageData.pageInfo.size, 1);
                        diag.close();
                     };
                     diag.show();
                },
                deleteAll: function(){
                	//批量删除
                	bootbox.confirm("你确认要删除选中的数据吗？", function(result){
                		if(!result){
                			return;
                		}
                		 var str = '';
                        for(var i=0;i < document.getElementsByName('ids').length;i++){
                          if(document.getElementsByName('ids')[i].checked){
                            if(str=='') str += document.getElementsByName('ids')[i].value;
                            else str += ',' + document.getElementsByName('ids')[i].value;
                          }
                        }
                        if(str==''){
                            bootbox.dialog({
                                message: "<span class='bigger-110'>您没有选择任何内容!</span>",
                                buttons:            
                                { "button":{ "label":"确定", "className":"btn-sm btn-success"}}
                            });
                            $("#zcheckbox").tips({
                                side:1,
                                msg:'点这里全选',
                                bg:'#AE81FF',
                                time:8
                            });
                            return;
                         }
                         top.jzts();
                		 $.post("/admin/articleleftmessage/deleteAll", {ids:str}, function(result){
                		 	if(result.code == 200){
                		 		pageList(0, pageData.pageInfo.size);
                		 	}else{
                		 		bootbox.alert(data.mes);
                		 	}
                		 });
                	});
                }
               
                
              }
        })
      
        //分页查询
        function pageList(pageIndex, pageSize, type){
            pageData.pageInfo.current = ((pageIndex - 0) +1);
            pageData.pageInfo.size = pageSize;
            top.jzts();
            $.post("/admin/articleleftmessage/list", pageData.pageInfo, function(result){
                if (result.code == 200){
                    pageData.data = [];
                    var resultData = result.data.data;
                    pageData.total = result.data.total;
                     if(type == 1){
                        initBootstrap(parseInt(result.data.total));
                    }
                    for (var i = 0; i < resultData.length; i++){
                        pageData.data.push(resultData[i]);
                    }
                }
                top.hangge();
            })
         
        }
        		
		
	   //分页初始化
        function initBootstrap(total){
             BootstrapPagination($("#ul_page"), {
                 //记录总数。 
                 total: total,
                 //当前页索引编号。从其开始（从0开始）的整数。
                 pageIndex: 0,
                 pageGroupSize: 5,
                 pageSize: 10,
                 //当分页更改后引发此事件。
                 pageChanged: function (pageIndex, pageSize) {
                      pageList(pageIndex, pageSize, 2);
                 },
             }); 
        }
		
		
		
		//导出excel
		function toExcel(){
			var preAction = $("#Form").attr("action");
			$("#Form").attr("action","/admin/articleleftmessage/excel");
			$("#Form").submit();
			$("#Form").attr("action",preAction);
		}
	</script>

	
</body>
</html>